import React from 'react';

import activeIntervention from '@/assets/images/activeIntervention.png';
import AndonVect from '@/assets/images/AndonVect.png';
import eventTigger from '@/assets/images/eventTigger.png';
import noDo from '@/assets/images/noDo.png';
import realTimeControl from '@/assets/images/realTimeControl.png';
import warnUpdate from '@/assets/images/warnUpdate.png';
import BaseDiv from '@/components/baseDiv';

import styles from './index.less';
const boxStyles: React.CSSProperties = {
  height: '594px',
  display: 'flex',
  justifyContent: 'space-evenly',
  alignItems: 'center',
};
const baseStyles: React.CSSProperties = {
  background: '#fff',
  opacity: 1,
};

export default function DescribeContent() {
  return (
    <BaseDiv baseStyles={baseStyles} boxStyles={boxStyles}>
      <div className={styles.content}>
        <div className={styles.title}>设计理念</div>
        <div className={styles.des}>具有弹性的基础设施，以尽可能低的成本来缩短安灯响应时间</div>
        <div className={styles.howUse}>
          <div>
            <div className={styles.icon}>
              <img src={realTimeControl} alt="" />
            </div>
            <div>实时控制</div>
          </div>
          <div>
            <div className={styles.icon}>
              <img src={eventTigger} alt="" />
            </div>
            <div>事件触发</div>
          </div>
          <div>
            <div className={styles.icon}>
              <img src={warnUpdate} alt="" />
            </div>
            <div>告警升级</div>
          </div>
          <div>
            <div className={styles.icon}>
              <img src={noDo} alt="" />
            </div>
            <div>无为而治</div>
          </div>
          <div>
            <div className={styles.icon}>
              <img src={activeIntervention} alt="" />
            </div>
            <div>主动干预</div>
          </div>
        </div>
        <div className={styles.floatContent}>
          <div>
            <img src={AndonVect} alt="" />
          </div>
          <div>
            安灯最早来自丰田生产体系，指的是用于在发生异常时通知管理、维护、质量或工艺等工作人员的系统。
            2010年12月1日，我们的Andon系统在延锋伟世通汽车电子有限公司正式上线，接收了第一条安灯事件呼叫，帮助客户大大的降低了异常事件的响应时间，
            <span>从开始的平均18分钟降到平均2分48秒</span>
          </div>
        </div>
      </div>
    </BaseDiv>
  );
}
